<template>
	<view class="question" :data-theme="theme">
		<!-- <u-collapse>
			<u-collapse-item title="1.我为什么会被限权，限权的原因是什么？" name="Docs guide">
				<text class="u-collapse-content">
					小羊驼进货平台所有合作商在于平台合作期间违反法律法规、与平台协议约定或相关平台规则，针对合作商的违规行为，小羊驼进货平台有权视情况采取相应的限权措施。具体限权原因见违规单详情中【违规原因】字段。</text>
			</u-collapse-item> -->

		<!-- <u-collapse-item title="2.被限权之后对我有什么影响？" name="Variety components">
				<text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
			</u-collapse-item>
			<u-collapse-item title="3.我收到了违规限权通知，对限权措施有异议，该如何申诉？" name="Numerous tools">
				<text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
			</u-collapse-item>
			<u-collapse-item title="4.申诉之后在哪里看到申诉结果？" name="Numerous tools">
				<text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
			</u-collapse-item>
			<u-collapse-item title="5.被客服售后违规限权，如何申诉？" name="Numerous tools">
				<text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
			</u-collapse-item>
			<u-collapse-item title="6.我提交申诉之后为什么申诉不通过？" name="Numerous tools">
				<text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
			</u-collapse-item>
			<u-collapse-item title="7.我收到了限权通知，想要申诉，为什么没有申诉入口?" name="Numerous tools">
				<text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
			</u-collapse-item> -->
		<!-- </u-collapse> -->
		<view class="accordion">
			<view v-for="(item, index) in accordionItems" :key="index" class="accordion-item">
				<view :class="['accordion-header', { 'active': activeIndex === index }]" @click="toggleItem(index)">
					<view>
						{{ `${index + 1}` + '.'+ item.title }}
					</view>
					<uni-icons type="forward" size="20" />
				</view>
				<view v-if="activeIndex === index" class="accordion-content">{{ item.content }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	let app = getApp();
	export default {
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				value: ['0'],
				activeIndex: -1, // 初始化时没有展开项
				accordionItems: [{
					title: '我为什么会被限权，限权的原因是什么？',
					content: '小羊驼进货平台所有合作商在于平台合作期间违反法律法规、与平台协议约定或相关平台规则，针对合作商的违规行为，小羊驼进货平台有权视情况采取相应的限权措施。具体限权原因见违规单详情中【违规原因】字段。'
				}, {
					title: '我为什么会被限312321权的原因是什么？',
					content: '小羊驼进货平台所有合作商在于平台合作期间违反法律法规、与平台协议约定或相关平台规则，针对合作商的违规行为，小羊驼进货平台有权视情况采取相应的限权措施。。'
				}],
			}
		},
		onLoad(options) {
			this.bgColor = setThemeColor()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
		},
		methods: {
			toggleItem(index) {
				this.activeIndex = this.activeIndex === index ? -1 : index;
			}
		}
	}
</script>

<style scoped lang='scss'>
	/* .question {
		background-color: white;
	}

	.example-body {
		flex-direction: column;
		flex: 1;
	}

	.content {
		padding: 15px;
	}

	.text {
		font-size: 14px;
		color: #f5f5f5;
		line-height: 20px;
	}

	.button {
		// margin-top: 10px;
		margin: 10px;
		margin-bottom: 0;
	} */

	.accordion {
		width: 100%;
	}

	.accordion-item {
		border-bottom: 1px solid #f0f0f0;
		margin-bottom: 5px;
	}

	/* .accordion-header {
		padding: 10px;
		background-color: #f0f0f0;
		cursor: pointer;
		display: flex;
		justify-content: space-between;
	} */
	.accordion-header {
		padding: 10px;
		border-radius: 8px;
		cursor: pointer;
		display: flex;
		justify-content: space-between;
		background-color: #f0f0f0;
		/* 根据展开状态调整样式 */
		transition: background-color 0.3s;
		/* 添加背景色过渡效果 */
	}

	.accordion-header.active {
		border-radius: 8px;
		background-color: #f5f5f5;
	}

	.accordion-content {
		padding: 10px;
		display: block;
		background-color: #fff;
		/* 当展开时显示内容 */
		/* 默认隐藏内容 */
		transition: max-height 0.3s;
		/* 添加高度过渡效果 */
		overflow: hidden;
	}

	/* .accordion-content.show {
		display: block;
	
	} */
</style>